<template>
  <ContainerGroup v-loading="patientloading">
    <Container style="margin: 0; padding: 0">
      <!-- 未预约和已预约tab -->
      <div class="tabs">
        <span
          style="margin-right: 55px"
          :class="tabsState === 0 ? 'span-active' : ''"
          @click="tabsClick(0)"
        >未预约</span>
        <span
          style="margin-right: 55px"
          :class="tabsState === 8 ? 'span-active' : ''"
          @click="tabsClick(8)"
        >预绑定</span>
        <span
          style="margin-right: 55px"
          :class="tabsState === 1 ? 'span-active' : ''"
          @click="tabsClick(1)"
        >已安排</span>
        <span
          style="margin-right: 55px"
          :class="tabsState === 3 ? 'span-active' : ''"
          @click="tabsClick(3)"
        >历史记录</span>
        <span
          :class="tabsState === 2 ? 'span-active' : ''"
          style="width: 150px; margin-right: 55px"
          @click="tabsClick(2)"
        >住院处已办理</span>
        <span
          style="margin-right: 55px"
          :class="tabsState === 4 ? 'span-active' : ''"
          @click="tabsClick(4)"
        >已住院</span>
        <span
          :class="tabsState === 5 ? 'span-active' : ''"
          @click="tabsClick(5)"
        >已出院</span>
        <span
          style="position: relative"
          :class="tabsState === 6 ? 'span-active' : ''"
          @click="tabsClick(6)"
        >床位申请
          <el-badge
            v-if="showNum != 0"
            :value="showNum"
            class="showTip"
          />
        </span>

        <span
          :class="tabsState === 7 ? 'span-active' : ''"
          @click="tabsClick(7)"
        >释放历史床位</span>

        <div class="editbox">
          <Button
            icon="edit"
            style="margin: 0"
            @click="ManualInput"
          >手工录入</Button>
        </div>
      </div>
    </Container>
    <Container style="margin-bottom: 10px">
      <div
        v-if="tabsState <= 5 || tabsState === 8"
        class="ck-filter-form"
        :style="{ height: SeeHeight }"
      >
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">院区：</span>
            <span>
              <el-select
                v-model="SeeFrom.region"
                placeholder="请选择院区"
                clearable
                size="mini"
                style="width: 150px"
                @change="handleYear"
              >
                <el-option
                  v-for="item in regionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="form-item">
            <span class="form-item-label">科室：</span>
            <el-select
              v-model="SeeFrom.deptCode"
              placeholder="请选择科室"
              size="mini"
              style="width: 150px"
              filterable
              clearable
            >
              <el-option
                v-for="item in ruleFormSelect.deptCodeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">姓名：</span>
            <el-input v-model="SeeFrom.name" size="mini" style="width: 150px" />
          </div>
          <div class="form-item">
            <span class="form-item-label">身份证：</span>
            <el-input
              v-model="SeeFrom.idCard"
              size="mini"
              style="width: 150px"
            />
          </div>
          <div class="form-item">
            <!-- <span v-if="tabsState === 0" class="form-item-label">期望入院时间：</span> -->
            <span class="form-item-label">时间：</span>
            <el-date-picker
              v-model="SeeFrom.registrationTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
          <div class="form-item">
            <Sort @sortClick="sortClick" />
          </div>
        </div>
        <div class="right-btn-container">
          <div
            class="patients-count"
            style="width: 280px; font-size: 13px; margin-top: 4px"
          >
            <span v-if="tabsState === 0" style="box-sizing: border-box; margin-right: 15px">门诊未安排/急诊未安排：{{ patientsCount.value }} / {{ patientsTwoCount.value }}</span>
            <!-- 门诊未安排/急诊未安排：{{ patientsCount.value }}/{{ patientsTwoCount.value }} -->
          </div>
          <div
            v-for="(item, index) in buttonListTwo"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
            >{{ item.label }}</Button>
          </div>
          <span
            v-show="SeeShowCloseAndOpen"
            class="more-text"
            @click="openSeeForm"
          >{{ openSeeText }}</span>
        </div>
      </div>
      <div
        v-if="tabsState == 6"
        class="ck-filter-form"
        :style="{ height: SeeHeight }"
      >
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">院区：</span>
            <span>
              <el-select
                v-model="crossForm.region"
                placeholder="请选择院区"
                clearable
                size="mini"
                style="width: 150px"
              >
                <el-option
                  v-for="item in regionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <div class="form-item">
            <span class="form-item-label">是否跨科室：</span>
            <el-select
              v-model="crossForm.isCrossNurse"
              placeholder="请选择科室"
              size="mini"
              style="width: 180px"
              filterable
              clearable
            >
              <el-option
                v-for="(item, index) in bedUggIeBCList"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">科室：</span>
            <el-select
              v-model="ruleForm.deptCode"
              placeholder="请选择科室"
              size="mini"
              style="width: 180px"
              filterable
              clearable
            >
              <el-option
                v-for="item in ruleFormSelect.deptCodeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">预检分级：</span>
            <el-select
              v-model="ruleForm.inspection"
              placeholder="请选择预检分级"
              size="mini"
              style="width: 180px"
              filterable
              clearable
            >
              <el-option
                v-for="item in ruleFormSelect.inspectionoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">姓名：</span>
            <el-input
              v-model="crossForm.name"
              size="mini"
              style="width: 180px"
            />
          </div>
          <div class="form-item">
            <span class="form-item-label">日期：</span>
            <el-date-picker
              v-model="crossForm.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
          <!-- <div class="form-item">
            <Sort @sortClick="sortClick" />
          </div> -->
        </div>
        <div class="right-btn-container">
          <div
            v-for="(item, index) in buttonCrossList"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
            >{{ item.label }}</Button>
          </div>
          <span
            v-show="SeeShowCloseAndOpen"
            class="more-text"
            @click="openSeeForm"
          >{{ openSeeText }}</span>
        </div>
      </div>
      <div v-if="tabsState == 7" class="text-history">
        不能正常取消预约的床位，请在此操作进行释放
      </div>
    </Container>
    <Container
      v-if="tabsState <= 5 || tabsState === 8"
      style="
        background-color: #f0f2f5;
        box-shadow: 0 0 0;
        margin: 0;
        padding: 0px;
      "
      height="fill"
      scroll-y="true"
    >
      <div style="display: flex; height: 100%">
        <div style="flex: 5">
          <!-- 门诊列表 -->
          <div
            class="emergency-treatment"
            style="margin-bottom: 11px; height: calc(50% + 40px)"
          >
            <div class="left">门诊</div>
            <div ref="outpatientbox" class="right-outpatient">
              <Empty
                v-if="outpatientList.length === 0"
                style="margin: 20px auto"
              />
              <div v-if="outpatientList.length !== 0" class="right">
                <div
                  v-for="(item, index) in outpatientList"
                  :id="item.preid"
                  :key="item.preid"
                  class="right-list"
                  :class="[item.checked ? 'right-list-active' : '', (item.preOpclass === '四级' || item.ynNewtech === '是') ? 'changeColor' : '']"
                  :style="outpatientList.length < 2 ? 'width:340px' : ''"
                  @click="
                    handleSeeOutpatient(item.preid, item, item.inpatientNo, '1')
                  "
                  @contextmenu.prevent="rightClick($event, item)"
                >
                  <p class="list-title" style="margin-bottom: 5px">
                    {{ index + 1 }}.{{ item.name }}（{{
                      item.sex == "2" ? "女" : "男"
                    }}
                    {{ item.age }}）
                    <i
                      v-if="item.isManual === '1'"
                      class="el-icon-edit"
                      @click.stop="ManualInputEdit(item.preid)"
                    />
                  </p>
                  <div
                    style="display: flex; margin-bottom: 5px"
                    class="list-state"
                  >
                    <div
                      v-if="item.patientTag === '2'"
                      style="
                        background-color: #fc6161;
                        color: rgba(255, 255, 255, 100);
                      "
                    >
                      院前
                    </div>
                    <div
                      style="
                        background: #37c0cd;
                        color: rgba(255, 255, 255, 100);
                        margin-left: 4px;
                      "
                    >
                      门诊
                    </div>
                    <div v-if="item.status != null" class="stay">
                      {{ item.status }}
                    </div>
                  </div>
                  <div style="margin-bottom: 5px; display: flex">
                    <p style="margin-right: 20px">
                      主治医师：{{
                        tabsState === 4 || tabsState === 5
                          ? item.chargeDocName
                          : item.predoctCode
                      }}
                    </p>
                    <p>住院科室：{{ item.deptName }}</p>
                  </div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.diagName"
                    placement="right"
                  >
                    <p
                      style="
                        width: 50%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        /* margin-bottom: 5px; */
                        text-align: center;
                      "
                    >
                      入院诊断：{{ item.diagName }}
                    </p>
                  </el-tooltip>
                  <p v-if="tabsState === 4 || tabsState === 5">
                    住院时间：{{ item.inDate }}
                  </p>
                  <div v-else>
                    <p>开立时间：{{ item.operDtime }}</p>
                    <p>期望入院时间：{{ item.predate }}</p>
                  </div>
                </div>
              </div>
              <div
                v-if="outpatientList.length !== 0"
                style="width: 100%; text-align: center"
              >
                <img
                  src="../../assets/image/more.png"
                  class="more-img"
                  alt=""
                  style="width: 15px; height: 8px"
                  @click="moreClick(1)"
                >
              </div>
            </div>
          </div>
          <!-- 急诊列表 -->
          <div class="emergency-treatment" style="height: calc(50% - 51px)">
            <div class="left">急诊</div>
            <div ref="emergencyCallbox" class="right-outpatient">
              <Empty
                v-if="emergencyList.length === 0"
                style="margin: 20px auto"
              />
              <div v-if="emergencyList.length !== 0" class="right">
                <div
                  v-for="(item, index) in emergencyList"
                  :id="item.preid"
                  :key="item.preid"
                  class="right-list"
                  :class="item.checked ? 'right-list-active' : ''"
                  :style="outpatientList.length < 2 ? 'width:340px' : ''"
                  @click="
                    handleSeeOutpatient(item.preid, item, item.inpatientNo, '0')
                  "
                  @contextmenu.prevent="rightClick($event, item)"
                >
                  <p class="list-title" style="margin-bottom: 5px">
                    {{ index + 1 }}.{{ item.name }}（{{
                      item.sex == "2" ? "女" : "男"
                    }}
                    {{ item.age }}）
                    <i
                      v-if="item.isManual === '1'"
                      class="el-icon-edit"
                      @click.stop="ManualInputEdit(item.preid)"
                    />
                  </p>
                  <div
                    style="display: flex; margin-bottom: 5px"
                    class="list-state"
                  >
                    <div
                      v-if="item.patientTag === '2'"
                      style="
                        background-color: #fc6161;
                        color: rgba(255, 255, 255, 100);
                      "
                    >
                      院前
                    </div>
                    <div
                      style="
                        background-color: rgba(255, 136, 2, 100);
                        color: rgba(255, 255, 255, 100);
                        margin-left: 4px;
                      "
                    >
                      急诊
                    </div>
                    <div v-if="item.status != null" class="stay">
                      {{ item.status }}
                    </div>
                  </div>
                  <div style="margin-bottom: 5px; display: flex">
                    <p style="margin-right: 20px">
                      主治医师：{{
                        tabsState === 4 || tabsState === 5
                          ? item.chargeDocName
                          : item.predoctCode
                      }}
                    </p>
                    <p>住院科室：{{ item.deptName }}</p>
                  </div>

                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.diagName"
                    placement="right"
                  >
                    <p
                      style="
                        width: 50%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        /* margin-bottom: 5px; */
                        text-align: center;
                      "
                    >
                      入院诊断：{{ item.diagName }}
                    </p>
                  </el-tooltip>
                  <p v-if="tabsState === 4 || tabsState === 5">
                    住院时间：{{ item.inDate }}
                  </p>
                  <div v-else>
                    <p>开立时间：{{ item.operDtime }}</p>
                    <p>期望入院时间：{{ item.predate }}</p>
                  </div>
                </div>
              </div>
              <div
                v-if="emergencyList.length !== 0"
                style="width: 100%; text-align: center"
              >
                <img
                  src="../../assets/image/more.png"
                  class="more-img"
                  alt=""
                  style="width: 15px; height: 8px"
                  @click="moreClick(0)"
                >
              </div>
            </div>
          </div>
          <!-- 预约绑定 -->
          <div v-show="menuVisibleBtn">
            <ul id="menuss" class="menuss" @mouseover="onleitve">
              <!-- <li class="menu__item" @click="btn">预约绑定</li> -->
              <li class="menu__item" @click="deletebtnClick">取消预约</li>
            </ul>
          </div>
        </div>
        <!-- 推荐床位 -->
        <el-collapse-transition>
          <bedDetails
            v-if="tabsState === 0 && seeState"
            ref="tabsbed"
            :distriet-code="distrietCode"
            :tabs-state="tabsState"
            :see-state="seeState"
            :bedmassage="bedmassage"
            :bedpatient="bedpatient"
            @revert="revert"
            @untabsClick="untabsClick"
          />
        </el-collapse-transition>
        <!-- 患者信息 -->
        <el-collapse-transition>
          <div v-if="seeState" class="right-patients">
            <p class="view-patients">
              <span>患者信息</span>
              <span
                style="color: #217dfa; cursor: pointer"
                @click="handlePatient"
              >查看详情信息>></span>
            </p>
            <div class="patients-content" style="margin-bottom: 9px">
              <p>病人姓名：{{ patientmessageList.name }}</p>
              <p>性别：{{ patientmessageList.sex === "1" ? "男" : "女" }}</p>
              <p>出生日期：{{ patientmessageList.birthday }}</p>
              <p>电话：{{ patientmessageList.linkmanTel }}</p>
            </div>
            <p class="view-patients">
              <span>住院信息</span>
            </p>
            <div class="patients-content" style="margin-bottom: 9px">
              <p>住院科室：{{ patientmessageList.deptName }}</p>
              <p>病区：{{ patientmessageList.nurseCellName }}</p>
              <p>床号：{{ patientmessageList.bedNo }}</p>
              <p>入院诊断：{{ patientmessageList.diagName }}</p>
              <p>
                收治医师：{{
                  tabsState === 4 || tabsState === 5
                    ? patientmessageList.chargeDocName
                    : patientmessageList.doctName
                }}
              </p>
              <p>
                是否日间手术：{{
                  patientmessageList.ifRjbf === null
                    ? "-"
                    : patientmessageList.ifRjbf === "0"
                      ? "否"
                      : "是"
                }}
              </p>
              <p>入院情况：-</p>
              <!-- <p>院前准备：有</p> -->
              <p>
                是否31日内非计划再次入院：{{
                  patientmessageList.ifInhosPlan === null
                    ? "-"
                    : patientmessageList.ifInhosPlan === "0"
                      ? "否"
                      : "是"
                }}
              </p>
              <p>
                是否外伤入院：{{
                  patientmessageList.ifInhosExternal === null
                    ? "-"
                    : patientmessageList.ifInhosExternal === "0"
                      ? "否"
                      : "是"
                }}
              </p>
              <p>预交住院费：{{ patientmessageList.prepayCost }}元</p>
              <p>入院方式：{{ _ryfs(patientmessageList) }}</p>
              <p>工号：{{ patientmessageList.operCode }}</p>
              <p>操作时间：{{ patientmessageList.operDtime }}</p>
              <p
                style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                备注：{{ patientmessageList.beizhu }}
              </p>
            </div>
          </div>
        </el-collapse-transition>
        <!-- <PrintPage ref="printPage" :print-info="printInfo" /> -->
      </div>
      <!-- 患者信息查看全部 -->
      <Drawer
        title="查看患者"
        :visible="drawerVisible"
        width="40%"
        hide-footer="true"
        @cancel="handleClose"
      >
        <div class="drawer-box">
          <p>
            患者信息
            <el-link
              type="primary"
              :underline="false"
              style="float: right"
              :disabled="linkdisabled"
              @click="getUrl"
            >360患者详情信息</el-link>
          </p>
          <div class="box-information" :style="{ height: containerHeight }">
            <div ref="notbox" class="basic-box">
              <div>
                病人姓名：{{
                  patientmessageList.name === null
                    ? "-"
                    : patientmessageList.name
                }}
              </div>
              <div>
                性别：{{
                  patientmessageList.sex === null
                    ? "-"
                    : patientmessageList.sex === "1"
                      ? "男"
                      : "女"
                }}
              </div>
              <div>
                出生年月：{{
                  patientmessageList.birthday === null
                    ? "-"
                    : patientmessageList.birthday
                }}
              </div>
              <div>
                结算类型：{{
                  patientmessageList.pacttype === null
                    ? "-"
                    : patientmessageList.pacttype
                }}
              </div>
              <div>身高体重：-</div>
              <div>过敏史：-</div>
              <div>生理指标：-</div>
              <div>挂号类型：-</div>
              <div>
                婚姻情况*：{{
                  patientmessageList.marrystate === null
                    ? "-"
                    : patientmessageList.marrystate
                }}
              </div>
              <div>
                身份证：{{
                  patientmessageList.idenno === null
                    ? "-"
                    : patientmessageList.idenno
                }}
              </div>
              <div>
                职业：{{
                  patientmessageList.profession === null
                    ? "-"
                    : patientmessageList.profession
                }}
              </div>
              <div>
                国籍：{{
                  patientmessageList.country === null
                    ? "-"
                    : patientmessageList.country
                }}
              </div>
              <!-- <div>
                籍贯：{{
                  patientmessageList.dist === null
                    ? "-"
                    : patientmessageList.dist
                }}
              </div> -->
              <div>
                现地址：{{
                  patientmessageList.home === null
                    ? "-"
                    : patientmessageList.home
                }}
              </div>
              <div>
                联系电话：{{
                  patientmessageList.homeTel === null
                    ? "-"
                    : patientmessageList.homeTel
                }}
              </div>
              <div>
                工作单位：{{
                  patientmessageList.workName === null
                    ? "-"
                    : patientmessageList.workName
                }}
              </div>
              <div>
                联系人：{{
                  patientmessageList.linkmaName === null
                    ? "-"
                    : patientmessageList.linkmaName
                }}
              </div>
              <div>
                与联系人关系：{{
                  patientmessageList.relative === null
                    ? "-"
                    : patientmessageList.relative
                }}
              </div>
              <div>
                联系人电话：{{
                  patientmessageList.linkmanTel === null
                    ? "-"
                    : patientmessageList.linkmanTel
                }}
              </div>
              <div style="width: 100%">
                联系人地址：{{
                  patientmessageList.linkmanAdd === null
                    ? "-"
                    : patientmessageList.linkmanAdd
                }}
              </div>
              <div>
                是否新技术：{{
                  patientmessageList.ynNewtech === null
                    ? "-"
                    : patientmessageList.ynNewtech
                }}
              </div>
              <div>
                手术级别：{{
                  patientmessageList.preOpclass === null
                    ? "-"
                    : patientmessageList.preOpclass
                }}
              </div>
              <div>
                是否跨科：{{
                  patientmessageList.ynOtherward === null
                    ? "-"
                    : (patientmessageList.ynOtherward === '0' ? '是' : '否')
                }}
              </div>
            </div>
            <span
              v-if="showCloseAndOpen"
              class="more-text"
              @click="openAndCloseFilterForm"
            >{{ openOrCloseText }}</span>
          </div>
          <p>住院信息</p>
          <div
            class="box-information"
            :style="{ height: hospitalizationHeight }"
          >
            <div ref="nothospitalization" class="basic-box">
              <div>
                住院科室：{{
                  patientmessageList.deptName === null
                    ? "-"
                    : patientmessageList.deptName
                }}
              </div>
              <div>
                病区：{{
                  patientmessageList.nurseCellName === null
                    ? "-"
                    : patientmessageList.nurseCellName
                }}
              </div>
              <div>
                床号：{{
                  patientmessageList.bedNo === null
                    ? "-"
                    : patientmessageList.bedNo
                }}
              </div>
              <div>
                预约时间：{{
                  patientmessageList.predate === null
                    ? "-"
                    : patientmessageList.predate
                }}
              </div>
              <div>
                收治医生：{{
                  tabsState === 4 || tabsState === 5
                    ? patientmessageList.chargeDocName
                    : patientmessageList.doctName === null
                      ? "-"
                      : patientmessageList.doctName
                }}
              </div>
              <div>
                入院诊断：{{
                  patientmessageList.diagName === null
                    ? "-"
                    : patientmessageList.diagName
                }}
              </div>
              <div>
                是否日间手术：{{
                  patientmessageList.ifRjbf === null
                    ? "-"
                    : patientmessageList.ifRjbf === "0"
                      ? "否"
                      : "是"
                }}
              </div>
              <div>
                入院情况：{{
                  patientmessageList.mszd === null
                    ? "-"
                    : patientmessageList.mszd
                }}
              </div>
              <!-- <div>院前准备：-</div> -->
              <div>
                是否31日内非计划再次入院：{{
                  patientmessageList.ifInhosPlan === null
                    ? "-"
                    : patientmessageList.ifInhosPlan === "0"
                      ? "否"
                      : "是"
                }}
              </div>
              <div>
                是否外伤入院：{{
                  patientmessageList.ifInhosExternal === null
                    ? "-"
                    : patientmessageList.ifInhosExternal === "0"
                      ? "否"
                      : "是"
                }}
              </div>
              <div>
                需预交住院费：{{
                  patientmessageList.prepayCost === null
                    ? "-"
                    : patientmessageList.prepayCost
                }}
              </div>
              <div>入院方式：{{ _ryfs(patientmessageList) }}</div>
              <div>
                工号：{{
                  patientmessageList.operCode === null
                    ? "-"
                    : patientmessageList.operCode
                }}
              </div>
              <div>
                操作时间：{{
                  patientmessageList.operDtime === null
                    ? "-"
                    : patientmessageList.operDtime
                }}
              </div>
              <div style="width: 80%; height: auto">
                备注：{{
                  patientmessageList.beizhu === null
                    ? "-"
                    : patientmessageList.beizhu
                }}
              </div>
            </div>
            <span
              v-if="hospitalizationOpen"
              class="more-text"
              @click="openHospitalization"
            >{{ hospitalizationText }}</span>
          </div>
          <p v-if="tabsState === 1">住院证</p>
          <div
            v-if="tabsState === 1"
            class="box-information"
            :style="{ height: '122px' }"
          >
            <Button @click="toHospitalCertificate">查看患者住院证</Button>
          </div>
        </div>
      </Drawer>
      <manualInput
        ref="manual"
        :manual-input-visible="ManualInputVisible"
        :manual-input-editpre-id="ManualInputEditpreId"
        @manual="manualBtn"
      />
      <!-- 取消预约 -->
      <div v-show="menuVisible">
        <ul id="menu" class="menu" @mouseover="onleitve">
          <li
            v-if="tabsState === 1"
            class="menu__item"
            style="margin-top: 3px"
            @click="btn"
          >
            取消预约
          </li>
          <li
            v-if="tabsState === 0"
            class="menu__item"
            style="margin-top: 3px"
            @click="deletebtn"
          >
            作废
          </li>
          <li class="menu__item" @click="btn1">取消</li>
          <li class="menu__item" @click="btnAdd">床位申请</li>
          <li v-if="tabsState === 1 && yard === '2'" class="menu__item" @click="printClick">
            <Button icon="printer" class="btn">取号</Button>
          </li>
          <!-- <Button v-show="false" ref="print" v-print="print">取号</Button> -->
        </ul>
      </div>
    </Container>
    <!-- 床位申请 -->
    <Container
      v-if="tabsState == 6"
      height="fill"
      display="flexY"
      style="margin-top: 1px"
    >
      <!-- <OperationContainer align="right" style="margin-bottom: 10px">
        <Button icon="export" @click="_DownLoad" type="success">Down</Button>
      </OperationContainer> -->
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        highlight-current-row
        border
        :header-cell-style="{ background: '#f5f7fa' }"
        style="width: 100%"
        height="calc(100% - 100px)"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center" width="55" /> -->
        <el-table-column
          type="selection"
          align="center"
          width="55"
          :selectable="handleIsAble"
        />
        <el-table-column type="index" align="center" label="序号" width="55" />
        <el-table-column
          prop="createTime"
          align="center"
          label="登记日期"
          width="240"
        />
        <el-table-column align="center" label="姓名" width="110">
          <template v-slot="scope">
            <a
              v-if="!scope.row.tipRemark"
              class="a-link"
              @click="handleToPerson(scope.row)"
            >{{ scope.row.name }}</a>
            <el-tooltip v-else :content="scope.row.tipRemark" placement="top">
              <span>{{ scope.row.name
              }}<i
                style="margin-left: 5px; color: #e6a23c"
                class="el-icon-warning-outline"
              /></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="sex" align="center" label="性别" width="60">
          <template slot-scope="scope">
            {{ scope.row.sex === "1" ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="" align="center" label="电话" width="220">
          <template slot-scope="scope">
            <div>
              <div class="item-phone"><div style="width: 100px;padding: 0 5px;text-align: right;font-size: 12px;">本人电话：</div><div style="flex: 1;font-size: 12px;">{{ scope.row.homeTel || '--' }}</div></div>
              <div class="item-phone"><div style="width: 100px;padding: 0 5px;text-align: right;font-size: 12px;">联系人电话：</div><div style="flex: 1;font-size: 12px;">{{ scope.row.linkmanTel || '--' }}</div></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="registeCode" align="center" label="预检分级">
          <template slot-scope="scope">
            {{ scope.row.registeCode === '6' ? '急诊' : '门诊' }}
          </template>
        </el-table-column>
        <el-table-column prop="patientTag" align="center" label="患者类型">
          <template slot-scope="scope">
            {{ patientTagConvert(scope.row.patientTag) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="deptName" align="center" label="拟入院科室" />
        <el-table-column prop="createBy" align="center" label="申请医生" />
        <el-table-column prop="diagName" align="center" label="入院诊断" />
        <el-table-column prop="isCrossNurse" align="center" label="是否跨区">
          <template slot-scope="scope">
            <span v-if="scope.row.isCrossNurse === '0'">否</span>
            <span v-if="scope.row.isCrossNurse === '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="applicationBedno"
          align="center"
          label="床位号"
        />
        <!-- <el-table-column
          prop="nucleicacid"
          align="center"
          label="核酸日期"
          width="240"
          :formatter="formatterTime"
        /> -->
        <el-table-column
          prop="predate"
          align="center"
          label="期望入院时间"
          width="240"
        />
        <el-table-column prop="remark" align="center" label="备注" />
        <el-table-column align="center" label="操作" width="120">
          <!-- v-if="scope.row.tipRemark" -->
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="发送通知"
              placement="top"
              style="margin-left: 10px"
            >
              <i
                class="el-icon-set-up"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handlesendtip(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              v-if="yard === '2'"
              class="item"
              effect="dark"
              content="取号"
              placement="top"
              style="margin-left: 10px"
            >
              <!-- <i
                class="el-icon-set-up"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handleRetrieval(scope.row)"
              /> -->
              <Button icon="printer" class="btn" @click="handleRetrieval(scope.row)"><img src="../../assets/image/retrieval.png" alt=""></Button>
            </el-tooltip>
            <!-- <Button v-show="false" ref="printsx" v-print="print">真实打印</Button> -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              style="margin-left: 10px"
            >
              <i
                class="el-icon-delete"
                style="
                  padding-top: 4px;
                  font-size: 20px;
                  color: #207efa;
                  cursor: pointer;
                "
                @click="handleDel(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="pageForm.total"
        :page="pageForm.currentPage"
        :page-size="pageForm.pageSize"
        @pagation="pagationChange"
      />
    </Container>
    <!-- 释放历史床位 -->
    <Container
      v-if="tabsState == 7"
      height="fill"
      display="flexY"
      style="margin-top: 10px"
    >
      <div class="form-history">
        <el-form
          ref="sfForm"
          :model="historyForm"
          :rules="historyRules"
          label-width="100px"
          class="sf-historyRule"
          size="small"
          style="width: 400px"
        >
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="historyForm.name" />
          </el-form-item>
          <el-form-item label="床位号：" prop="bedNo">
            <el-input v-model="historyForm.bedNo" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleHistorySubmit('sfForm')"
            >释放</el-button>
          </el-form-item>
        </el-form>
      </div>
    </Container>
    <PrintPage ref="printPage" :print-info="printInfo" />
    <Button v-show="false" ref="print" v-print="print">取号</Button>

    <!-- 取消预约 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <div style="margin: -30px 0 15px 50px">
        <span>取消原因:</span>
        <el-select v-model="makeVal" clearable placeholder="请选择" size="mini" style="margin-left: 10px;">
          <el-option
            v-for="item in dialogOptions"
            :key="item.id"
            :label="item.reason"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div v-if="makeVal === 99" style="width: 310px;margin-left: 40px;">
        <span style="color: red;">* </span><span>手动输入:</span>
        <el-input
          placeholder="请输入取消原因"
          v-model="reason"
          size="mini"
          style="width: 194px;margin-left: 10px;"
          clearable>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleReason">确 定</el-button>
      </span>
    </el-dialog>
  </ContainerGroup>
</template>
<script>
// import EventBus from '../../utils/eventBus.js'
import Pagination from '../../components/pagination/index'
import {
  PrepayinList,
  InmaininfoList,
  getById,
  delPatientBed,
  InpatienthandleList,
  updateStatus,
  getHospitalized,
  getLeaveHospital,
  historyRecode,
  getThisIiInmaininfo,
  getBedReservationQuery,
  // deleteinformation,
  // getNoHandleListCount,
  updateRootState,
  releaseJGBedHistory,
  sendMessageToDoctor,
  getThisIiPrepayinPrebundled,
  getQueueNum,
  getCacelReson
} from '../../utils/apis/InpatientRegistration.js'
import {
  getDeptList,
  updateReleaseBed
} from '../../utils/apis/registrationApi'
import manualInput from './manualInput.vue'
import bedDetails from './bedDetails.vue'
import { getBedApplicationDownLoadExcel } from '../../utils/apis/preparedness.js'
import { updatePrebundled } from '../../utils/apis/prebundled'
import PrintPage from './printPage.vue'
export default {
  components: { manualInput, bedDetails, Pagination, PrintPage },
  data() {
    return {
      historyForm: {
        bedNo: '',
        name: ''
      },
      historyRules: {
        bedNo: [{ required: true, message: '请输入床位号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
      },
      multSelectedData: [],
      pageForm: {
        total: 0,
        currentPage: 1,
        pageSize: 20
      },
      tableLoading: false,
      crossForm: {
        name: '',
        isCrossNurse: '',
        createTime: [],
        region: ''
      },
      bedUggIeBCList: [
        {
          label: '全部',
          value: '2'
        },
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      tableData: [],
      patientloading: false, // 页面刷新加载
      tabsState: 6, // tab切换状态（默认显示床位申请页面）
      filterElements: [
        {
          key: 'department',
          type: 'Select',
          label: '科室',
          value: '',
          options: [],
          width: '240'
        },
        {
          key: 'name',
          type: 'Input',
          label: '姓名',
          value: '',
          width: '240'
        },
        {
          key: 'idCard',
          type: 'Input',
          label: '身份证',
          value: '',
          width: '240'
        },
        // {
        //   key: 'bed',
        //   type: 'Select',
        //   label: '是否待床',
        //   value: '',
        //   width: '240',
        //   options: [
        //     {
        //       label: '是',
        //       value: '1'
        //     },
        //     {
        //       label: '否',
        //       value: '0'
        //     }
        //   ]
        // },
        {
          key: 'registrationTime',
          type: 'DateTimePicker',
          mode: 'datetimerange',
          width: '500',
          label: '预约时间',
          value: ''
        },
        {
          key: 'sort',
          type: 'Sort',
          value: '',
          width: '60'
        }
      ], // 头部搜索
      buttonCrossList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerCrossSearch,
          loading: false
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerCrossReset
        },
        {
          label: '批量删除',
          type: 'delete',
          icon: 'delete',
          handlerClick: this.handleBatchDel
        },

        {
          label: 'DownLoad',
          type: 'down',
          icon: 'download',
          handlerClick: this._DownLoad
        }
      ],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerSearch,
          loading: false
        },
        {
          label: '一键释放',
          type: 'primary',
          handlerClick: this.handleyjsf
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ], // 头部按钮
      order: '1', // 排序切换
      emergencyList: [], // 急诊患者列表
      outpatientList: [], // 门诊患者列表
      emergencyCallPageNum: 1, // 急诊分页
      outpatientPageNum: 1, // 门诊分页
      queryList: {}, // 查询条件
      seeState: false, // 患者信息模块显示隐藏状态
      patientmessageList: [], // 患者信息数据
      drawerVisible: false, //  患者信息查看全部
      containerHeight: '122px', // 患者信息盒子高度
      showCloseAndOpen: false, // 患者信息盒子的状态
      openOrCloseText: '查看全部', // 患者信息查看全部的文本
      hospitalizationHeight: '122px', // 住院信息盒子高度
      hospitalizationOpen: false, // 住院信息盒子的状态
      hospitalizationText: '查看全部', // 住院信息查看全部的文本
      ManualInputVisible: false,
      ManualInputEditpreId: '', // 手工录入的编辑患者id
      bedmassage: {}, // 获取床位列表参数
      bedpatient: {}, // 预约床位患者名字，id
      menuVisible: false, // 右键点击
      deletepreid: '', // 作废id
      bedorder: '', //
      cancelOrder: {}, // 取消预约参数
      linkdisabled: false, // 是否禁用蓝色链接
      clinicCode: '',
      openSeeText: '展开',
      SeeHeight: '35px',
      SeeShowCloseAndOpen: false,
      SeeFrom: {
        preid: '',
        deptCode: '',
        name: '',
        idCard: '',
        registrationTime: '',
        region: ''
      },
      ruleFormSelect: {
        deptCodeoptions: [],
        inspectionoptions: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '急诊',
            value: '6'
          },
          {
            label: '门诊',
            value: '1'
          }
        ]
      },
      ruleForm: {
        deptCode: '',
        inspection: ''
      },
      idCard: '',
      deptCode: '',
      newParamList: {},
      showNum: 0,
      patientsCount: {},
      patientsTwoCount: {},
      regionoptions: [
        {
          value: '1',
          label: '三香院区'
        },
        {
          value: '2',
          label: '浒关院区'
        }
      ],
      itemAdd: {},
      menuVisibleBtn: false,
      parameterObj: {},
      printInfo: {},
      print: {
        id: 'print-box',
        popTitle: '&nbsp;', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
        extraHead: '&nbsp;' // 头部文字 默认空
      },
      yard: '',
      preId: '',
      distrietCode: '1',
      dialogVisible: false,
      dialogOptions: [],
      makeVal: '',
      reason: '',
      typeNum: '',
      sendtipRow: {}
    }
  },
  computed: {
    buttonListTwo() {
      return this.buttonList.filter((item, index) => {
        if (this.tabsState === 0) {
          return item
        } else {
          return index !== 1
        }
      })
    }
  },
  watch: {
    '$store.state.showTipNum': function(val) {
      this.showNum = val
    }
  },
  activated() {
    this.showNum = this.$store.state.showTipNum
    // if (this.$route.query.type == 1) {
    //   //从点击提示跳转的页面
    //   this.tabsState = 5;
    //   this.tabsClick(this.tabsState);
    //   // EventBus.$emit("handleCloseTip", true);
    // } else {
    //   this.tabsState = 0;
    //   this.tabsClick(this.tabsState);
    // }
  },
  created() {
    const y = localStorage.yard
    const index = y.indexOf('2')
    if (index !== -1) {
      this.yard = y.substr(index, 1)
    }
    console.log('this.yard', this.yard)
    const that = this
    window.setInterval(function() {
      var refreshHours = new Date().getHours()
      var refreshMin = new Date().getMinutes()
      var refreshSec = new Date().getSeconds()
      // console.log("refreshHours", refreshHours);
      // console.log("refreshMin", refreshMin);
      // console.log("refreshSec", refreshSec);
      if (refreshHours === '23' && refreshMin === '59' && refreshSec === '59') {
        // 指定每天凌晨做的事情
        that.handleyjsf()
      }
    }, 1000)
  },
  mounted() {
    this.getDateTime()
    this.getDept()
    this.$nextTick(() => {
      this.getPreCurDate()
      this.getList()
    })
    this.initShowCloseOrOpen()
    // this.handlePatient()
    window.addEventListener('resize', this.initShowCloseOrOpen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initShowCloseOrOpen)
  },
  methods: {
    _getCacelReson() {
      getCacelReson().then(res => {
        if (res.data.code === 200) {
          this.dialogOptions = res.data.data
        }
      })
    },
    handleYear(val) {
      this.distrietCode = val
    },
    handlesendtip(row) {
      // this.$confirm({
      //   content: '集管床位已满，请考虑走院前流程',
      //   title: '确认信息',
      //   okFn: (res) => {
          // const param = {
          //   name: row.name,
          //   jobNumber: row.jobNumber,
          //   diagName: row.diagName,
          //   nurseCellName: row.nurseCellName,
          //   remark: '集管床位已满，请考虑走院前流程'
          // }
          // sendMessageToDoctor(param).then((res) => {
          //   if (res.data.code === 200) {
          //     this.$message.success(res.data.message)
          //     this.getList()
          //   } else {
          //     this.$message.error(res.data.message)
          //   }
          // })
      //   },
      //   cancelFn: (res) => {
      //     console.log('取消')
      //   }
      // })
      this.typeNum = 2
      this.sendtipRow = row
      this.dialogVisible = true
      this._getCacelReson()
    },
    handleHistorySubmit(formName) {
      // 历史床位释放
      this.$refs[formName].validate((valid) => {
        if (valid) {
          releaseJGBedHistory(this.historyForm).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleIsAble(row, index) {
      if (row.tipRemark) {
        return row
      }
    },
    _DownLoad() {
      const params = {
        startDate: this.crossForm.createTime.length
          ? `${this.crossForm.createTime[0]}`
          : '',
        endDate: this.crossForm.createTime.length
          ? `${this.crossForm.createTime[1]}`
          : '',
        isCrossNurse: this.crossForm.isCrossNurse,
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        yard: this.crossForm.region
      }
      getBedApplicationDownLoadExcel(params).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data])
        const fileName = '床位申请统计报表' + '.xlsx'
        const URL = window.URL || window.webkitURL || window.moxURL
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName // 命名下载名称
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob) // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink)
          elink.click() // 点击触发下载
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
        // }
      })
    },
    handleSelectionChange(val) {
      this.multSelectedData = val.map((item) => item.preid)
    },
    handleBatchDel() {
      // 批量删除
      if (!this.multSelectedData.length) {
        this.$message.warning('请选择要删除的数据!')
        return
      }
      this.handleDel(this.multSelectedData)
    },
    getInOutHosTime() {
      const date =
        new Date().getFullYear() +
        '-' +
        (new Date().getMonth() + 1) +
        '-' +
        new Date().getDate()
      this.SeeFrom.registrationTime = [
        date + ' ' + '00:00:00',
        date + ' ' + '23:23:59'
      ]
    },
    getPreCurDate() {
      const gqTime = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
      const preDate =
        gqTime.getFullYear() +
        '-' +
        (gqTime.getMonth() + 1) +
        '-' +
        gqTime.getDate()
      const date =
        new Date().getFullYear() +
        '-' +
        (new Date().getMonth() + 1) +
        '-' +
        new Date().getDate()
      this.crossForm.createTime = [
        preDate + ' ' + '00:00:00',
        date + ' ' + '23:23:59'
      ]
    },
    handleyjsf() {
      // 一键释放
      this.$confirm({
        title: '温馨提示',
        content: '是否一键释放？',
        okText: '确定',
        cancelText: '取消',
        okFn: () => {
          updateReleaseBed().then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: () => {
          console.log('取消')
        }
      })
    },
    handleToPerson(row) {
      // console.log("row", row);
      this.SeeFrom.name = row.name
      this.SeeFrom.preid = row.preid
      this.SeeFrom.region = row.yard
      console.log('this.SeeFrom.idCard', this.SeeFrom.idCard)
      this.tabsState = 0
      this.getList(1)
    },
    handleDel(row) {
      // 删除
      this.$confirm({
        title: '温馨提示',
        content: Array.isArray(row)
          ? '您确定要批量删除？'
          : `请确认是否已和&nbsp;<span style="color:red;">${row.createBy}-${row.jobNumber}</span>&nbsp;确认删除该数据?`,
        okText: '确定',
        cancelText: '取消',
        okFn: () => {
          const param = Array.isArray(row) ? row : [row.preid]
          updateRootState(param).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.getList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: () => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
    },
    // 分页
    pagationChange(payload) {
      this.pageForm.currentPage = payload.page
      this.pageForm.pageSize = payload.pageSize
      this.getList()
    },
    setPatientInfo(item) {
      this.idCard = item.idenno
      this.deptCode = item.deptCode
    },
    toHospitalCertificate() {
      this.$router.push({
        path: '/hospital-certificate',
        query: {
          idCard: this.idCard,
          deptCode: this.deptCode,
          preId: this.preId
        }
      })
    },
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.SeeShowCloseAndOpen =
          this.$refs['input-container']?.scrollHeight > 35
      }, 50)
    },
    openSeeForm() {
      this.SeeHeight = this.openSeeText === '展开' ? 'auto' : '35px'
      this.openSeeText = this.openSeeText === '展开' ? '收起' : '展开'
    },
    // 获取最近七天数据
    getDateTime() {
      const days = []
      var dates = new Date()
      for (let i = 0; i <= 144; i += 24) {
        // 144是前六天的小时数
        const dateItem = new Date(dates.getTime() - i * 60 * 60 * 1000) // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        const y = dateItem.getFullYear() // 获取年份
        let m = dateItem.getMonth() + 1 // 获取月份js月份从0开始，需要+1
        let d = dateItem.getDate() // 获取日期
        m = this.addDate0(m) // 给为单数的月份补零
        d = this.addDate0(d) // 给为单数的日期补零
        const valueItem = y + '-' + m + '-' + d + ' 00:00:00' // 组合
        days.push(valueItem) // 添加至数组
      }
      const endTime = days[0].replace(/ 00:00:00/g, ' 23:59:59')
      this.SeeFrom.registrationTime = [days[6], endTime]
    },
    //  //给日期加0
    addDate0(time) {
      if (time.toString().length === 1) {
        time = '0' + time.toString()
      }
      return time
    },
    // 获取患者列表参数
    getListParams() {
      const params = {
        checkInTimeStart:
          this.SeeFrom.registrationTime === '' ||
          this.SeeFrom.registrationTime === null
            ? ''
            : this.SeeFrom.registrationTime[0], // 预约时间开始
        checkInTimeend:
          this.SeeFrom.registrationTime === '' ||
          this.SeeFrom.registrationTime === null
            ? ''
            : this.SeeFrom.registrationTime[1], // 预约时间结束
        deptCode: this.SeeFrom.deptCode, // 科室编码
        idCard: this.SeeFrom.idCard, // 身份证
        name: this.SeeFrom.name, // 姓名
        emergencyCallPageNum: this.emergencyCallPageNum,
        register: this.tabsState, // 是否预约 0未预约 1预约
        // stayInBed: '', // 是否待床
        outpatientPageNum: this.outpatientPageNum,
        order: this.order,
        preid: this.SeeFrom.preid,
        yard: this.SeeFrom.region // 院区
      }
      return params
    },
    // 获取患者列表
    getList(obj) {
      this.patientloading = true
      const params = this.getListParams()
      // console.log('prams', params)
      if (this.tabsState === 0) {
        PrepayinList(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
            this.patientsCount = res.data.data.noAppointment[0]
            this.patientsTwoCount = res.data.data.noAppointment[1]
            if (obj == 1) {
              const emergencyCall = res.data.data.emergencyCall[0]
              const outpatient = res.data.data.outpatient[0]
              if (res.data.data.emergencyCall.length > 0) {
                // 急诊
                this.handleSeeOutpatient(
                  emergencyCall.preid,
                  emergencyCall,
                  emergencyCall.inpatientNo,
                  '0'
                )
              }
              if (res.data.data.outpatient.length > 0) {
                // 门诊
                this.handleSeeOutpatient(
                  outpatient.preid,
                  outpatient,
                  outpatient.inpatientNo,
                  '1'
                )
              }
            }
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 1) {
        InmaininfoList(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 2) {
        InpatienthandleList(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 3) {
        historyRecode(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 4) {
        getHospitalized(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 5) {
        getLeaveHospital(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 6) {
        // 床位申请
        this.patientloading = false
        const params = {
          startTime: this.crossForm.createTime ? this.crossForm.createTime[0] : null,
          endTime: this.crossForm.createTime ? this.crossForm.createTime[1] : null,
          isCrossNurse: this.crossForm.isCrossNurse,
          name: this.crossForm.name,
          yard: this.crossForm.region,
          pageIndex: this.pageForm.currentPage,
          pageSize: this.pageForm.pageSize,
          deptCode: this.ruleForm.deptCode,
          registeCode: this.ruleForm.inspection
        }
        this.tableLoading = true
        getBedReservationQuery(params).then((res) => {
          if (res.data.code === 200) {
            this.tableLoading = false
            this.tableData = res.data.data.list
            this.pageForm.total = res.data.data.total || 0
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.tabsState === 7) {
        this.patientloading = false
      } else if (this.tabsState === 8) {
        getThisIiPrepayinPrebundled(params).then((res) => {
          if (res.data.code === 200) {
            this.assignment(obj, res)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    // 列表数组赋值
    assignment(obj, res) {
      this.patientloading = false
      // if (this.emergencyList.length !== 0) {
      //   if (obj && obj.emergencyCall !== this.emergencyCallPageNum) {
      //     res.data.data.emergencyCall.map((item) => {
      //       if (
      //         this.emergencyList.findIndex(
      //           (element) => item.preid == element.preid
      //         ) == -1
      //       ) {
      //         this.emergencyList.push(item)
      //       }
      //     })

      //     // this.emergencyList.push(...res.data.data.emergencyCall);
      //   }
      // } else {
      //   this.emergencyList = res.data.data.emergencyCall
      // }
      // if (this.outpatientList.length !== 0) {
      //   console.log('111111111111111', res.data.data.outpatient)
      //   if (obj && obj.outpatient !== this.outpatientPageNum) {
      //     res.data.data.outpatient.map((item) => {
      //       // 判断要添加的元素是否存在
      //       if (
      //         this.outpatientList.findIndex(
      //           (element) => item.preid == element.preid
      //         ) == -1
      //       ) {
      //         this.outpatientList.push(item)
      //       }
      //     })
      //   }
      // } else {
      //   console.log('2222222222222222222')
      //   this.outpatientList = res.data.data.outpatient
      // }
      this.emergencyList = res.data.data.emergencyCall
      this.outpatientList = res.data.data.outpatient
    },
    untabsClick() {
      this.tabsState = 1
      this.SeeFrom.name = ''
      this.handerSearch()
      this.getRetrieval()
    },
    // tab切换
    tabsClick(state) {
      if (state === 0) {
        this.tabsState = state
      } else if (state === 1) {
        this.tabsState = state
      } else if (state === 2) {
        this.tabsState = state
      } else if (state === 3) {
        this.tabsState = state
      } else if (state === 4) {
        this.tabsState = state
        this.$nextTick(() => {
          this.getInOutHosTime()
        })
      } else if (state === 5) {
        this.tabsState = state
        this.$nextTick(() => {
          this.getInOutHosTime()
        })
      } else if (state === 6) {
        this.tabsState = state
        this.$nextTick(() => {
          this.getPreCurDate()
        })

        this.$store.commit('setShowTip', 0)
      } else if (state === 7) {
        // 释放历史床位
        this.tabsState = state
      } else if (state === 8) {
        this.tabsState = state
      }
      this.seeState = false
      this.handlerReset()
      this.emptyFun({})
      this.getList()
    },
    // 打印取号单
    printClick() {
      this.getRetrieval()
    },
    // 取号
    handleRetrieval(row) {
      this.patientName = row.name
      this.getRetrieval()
      // console.log(this.$refs.print)
    },
    // 排队取号
    getRetrieval() {
      if (this.yard === '2') {
        const content = `<div style="word-break:break-all;width:386px">是否为${this.patientName}排队取号,确定此操作吗？</div>`
        this.$confirm({
          content: content,
          title: '确认信息',
          okFn: (res) => {
            this.getPrinting()
          },
          cancelFn: (res) => {
            console.log(res)
          }
        })
      }
    },
    // 打印排队号码
    getPrinting() {
      const content = `<div style="word-break:break-all;width:386px">是否打印${this.patientName}排队号码？</div>`
      this.$confirm({
        content: content,
        title: '确认信息',
        okFn: (res) => {
          this._getQueueNum()
        },
        cancelFn: (res) => {
          console.log(res)
        }
      })
    },
    // 打印预览数据
    _getQueueNum() {
      getQueueNum({ areaId: 30 }).then(res => {
        if (res.data.code === 200) {
          this.printInfo = res.data.data
          // console.log(this.$refs.print)
          this.$refs.print.$el.click()
        }
      })
    },
    // 手工录入点击弹出抽屉
    ManualInput() {
      this.ManualInputVisible = true
    },
    manualBtn(params) {
      this.ManualInputVisible = params.ManualInputVisible
      this.ManualInputEditpreId =
        params.ManualInputEditpreId === undefined
          ? ''
          : params.ManualInputEditpreId
    },
    // 科室列表
    getDept() {
      getDeptList({ districtCodeList: ['1', '2'] }).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.ruleFormSelect.deptCodeoptions.push(dats)
          })
        }
      })
    },
    // 排序
    sortClick(val) {
      this.order = val[1]
      this.handerSearch({})
    },
    // 查询
    handerSearch(val) {
      this.emptyFun(val)
      this.getList()
    },
    handerCrossSearch() {
      this.pageForm.currentPage = 1
      this.getList()
    },
    handlerCrossReset() {
      this.crossForm.name = ''
      this.crossForm.region = ''
      // this.crossForm.createTime = "";
      this.crossForm.isCrossNurse = ''
      this.pageForm.currentPage = 1
      this.ruleForm.deptCode = ''
      this.ruleForm.inspection = ''
      this.getPreCurDate()
      this.getList()
    },
    // 清空列表数组函数
    emptyFun() {
      this.emergencyList = []
      this.outpatientList = []
      this.emergencyCallPageNum = 1
      this.outpatientPageNum = 1
      this.seeState = false
    },
    // 重置按钮
    handlerReset() {
      this.SeeFrom = {
        preid: '',
        deptCode: '',
        name: '',
        idCard: '',
        registrationTime: '',
        region: ''
      }
      if (
        this.tabsState === 0 ||
        this.tabsState === 1 ||
        this.tabsState === 2
      ) {
        this.getDateTime()
      }
      if (this.tabsState === 4 || this.tabsState === 5) {
        this.getInOutHosTime()
      }
    },
    // 门诊,急诊选中查看患者信息
    handleSeeOutpatient(id, row, inpatientNo, state) {
      this.setPatientInfo(row)
      const checked = !row.checked
      let arr
      if (state === '1') {
        this.emergencyList.map((item) => {
          item.checked = false
          return item
        })
        this.outpatientList.forEach((item) => {
          item.checked = false
          if (item.preid === id) {
            item.checked = true
          }
          return item
        })
        arr = this.outpatientList.filter((item) => {
          return item.checked === true
        })
      } else {
        this.outpatientList.map((item) => {
          item.checked = false
          return item
        })
        this.emergencyList.map((item) => {
          item.checked = false
          if (item.preid === id) {
            item.checked = checked
          }
          return item
        })
        arr = this.emergencyList.filter((item) => {
          return item.checked === true
        })
      }
      let params
      if (arr.length === 0) {
        this.seeState = false
      } else {
        this.seeState = true

        if (inpatientNo === null) {
          this.bedpatient = {
            patientName: row.name, // 病人姓名
            patientId: id
          }
          this.patientName = row.name // 病人姓名
          this.patientId = id
          params = {
            id: id
          }
        } else {
          params = {
            id: inpatientNo
          }
        }
        if (this.tabsState === 4 || this.tabsState === 5) {
          getThisIiInmaininfo(params).then((res) => {
            if (res.data.code === 200) {
              this.patientmessageList = res.data.data
              this.clinicCode = this.patientmessageList.inpatientNo
              if (this.patientmessageList.clinicCode !== null) {
                this.linkdisabled = false
              } else {
                this.linkdisabled = true
              }
            }
          })
        } else {
          getById(params).then((res) => {
            if (res.data.code === 200) {
              this.patientmessageList = res.data.data
              console.log('inpatientNo', inpatientNo)
              this.preId = res.data.data.preid
              if (inpatientNo === null) {
                const par = {
                  patientSex: row.sex,
                  sfkc: '1',
                  deptCode: this.patientmessageList.deptCode,
                  // areaCode: this.patientmessageList.nurseCellCode,
                  bedTypeCodeList: ['1']
                }
                this.clinicCode = this.patientmessageList.clinicCode
                if (this.patientmessageList.clinicCode !== null) {
                  this.linkdisabled = false
                } else {
                  this.linkdisabled = true
                }
                this.bedmassage = par
                if (this.tabsState === 0) {
                  this.$nextTick(() => {
                    this.$refs.tabsbed.tabsbedClick('1', par)
                  })
                }
              }
            }
          })
        }
      }
      // console.log('item.checked',checked)
    },
    // 右键取消预约
    rightClick(MouseEvent, item) {
      console.log(item);
      this.patientName = item.name
      // this.menuVisible = true
      // console.log(11111111111111111, this.tabsState);
      this.itemAdd = item
      if (this.tabsState === 1) {
        this.menuVisible = true
        this.cancelOrder = {
          bedId: item.bedNo,
          name: item.name,
          patientId: item.preid
        }
        this.bedorder =
          item.deptName + item.nurseCellName + item.bedNo + '号床' + item.name
        var menu = document.querySelector('#menu')
      } else if (this.tabsState === 0) {
        // if (item.isManual === '1') {
        this.menuVisible = true
        this.deletepreid = item.preid
        // }
        var menu = document.querySelector('#menu')
      }

      this.parameterObj = item
      if (this.tabsState === 8) {
        this.menuVisibleBtn = true
        var menu = document.querySelector('#menuss')
      }
      if (MouseEvent.screenX < 100) {
        menu.style.left = MouseEvent.clientX + 'px'
        menu.style.top = MouseEvent.clientY + 'px'
      }
      if (MouseEvent.screenX > 100) {
        menu.style.left = MouseEvent.clientX + 4 + 'px'
        menu.style.top = MouseEvent.clientY + 7 + 'px'
      }
      document.addEventListener('click', this.foo)
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisibleBtn = false
      this.menuVisible = false
      document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    ManualInputEdit(id) {
      this.ManualInputEditpreId = id
      this.ManualInputVisible = true
      this.$nextTick(() => {
        this.$refs.manual.ManualInputEdit(this.ManualInputEditpreId)
      })
    },
    // 分页查看更多
    moreClick(state) {
      const obj = {
        emergencyCall: this.emergencyCallPageNum,
        outpatient: this.outpatientPageNum
      }
      if (state === 0) {
        this.emergencyCallPageNum++ // 急诊分页
        this.getList(obj)
      } else if (state === 1) {
        this.outpatientPageNum++ // 门诊分页
        this.getList(obj)
      }
    },
    // 查看患者信息按钮抽屉
    handlePatient() {
      this.drawerVisible = true
      this.$nextTick(() => {
        this.showCloseAndOpen = this.$refs.notbox?.scrollHeight > 120
        this.hospitalizationOpen =
          this.$refs.nothospitalization?.scrollHeight > 120
      })
    },
    // 住院信息查看全部按钮
    openHospitalization() {
      this.hospitalizationHeight =
        this.hospitalizationText === '查看全部' ? 'auto' : '120px'
      this.hospitalizationText =
        this.hospitalizationText === '查看全部' ? '收起' : '查看全部'
    },
    // 患者信息查看全部按钮
    openAndCloseFilterForm() {
      this.containerHeight =
        this.openOrCloseText === '查看全部' ? 'auto' : '120px'
      this.openOrCloseText =
        this.openOrCloseText === '查看全部' ? '收起' : '查看全部'
    },
    // 患者信息查看全部抽屉关闭
    handleClose() {
      this.drawerVisible = false
      this.openOrCloseText = '查看全部'
      this.hospitalizationText = '查看全部'
      this.hospitalizationHeight = '120px'
      this.containerHeight = '120px'
    },
    // 入院方式
    _ryfs(patientmessageList) {
      if (
        patientmessageList.ifEmergency !== null &&
        patientmessageList.ifEmergency === '1'
      ) {
        return '急'
      } else if (
        patientmessageList.ifWalk !== null &&
        patientmessageList.ifWalk === '1'
      ) {
        return '步行'
      } else if (
        patientmessageList.ifChair !== null &&
        patientmessageList.ifChair === '1'
      ) {
        return '抬车'
      } else if (
        patientmessageList.ifAmbulance !== null &&
        patientmessageList.ifAmbulance === '1'
      ) {
        return '病床'
      } else {
        return '-'
      }
    },
    // 返回列表
    revert(params) {
      this.seeState = params
      this.emergencyList.map((item) => {
        item.checked = false
        return item
      })
      this.outpatientList.map((item) => {
        item.checked = false
        return item
      })
    },
    // 鼠标移上去高亮
    onleitve() {
      var lis = document.getElementsByTagName('li')
      for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
          this.style.color = '#217DFA'
        }
        lis[i].onmouseout = function() {
          this.style.color = '#555555'
        }
      }
    },
    // 取消小框框
    btn1() {
      this.menuVisible = false
    },
    // 取消预约确定按钮
    btn() {
      this.typeNum = 1
      this.dialogVisible = true
      this._getCacelReson()
      // const content = `<div style="word-break:break-all;width:386px">确定取消${this.bedorder}的预约登记吗</div>`
      // this.$confirm({
      //   content: content,
      //   showInput: true,
      //   placeholder: '请输入取消原因',
      //   title: '确认信息',
      //   okFn: (res) => {
      //     this.cancelOrder.remark = res
      //     const params = this.cancelOrder
      //     delPatientBed(params).then((res) => {
      //       if (res.data.code === 200) {
      //         this.$message.success(res.data.message)
      //         this.cancelOrder = {}
      //         this.$router.go(0)
      //       } else {
      //         this.$message.error(res.data.message)
      //       }
      //     })
      //   },
      //   cancelFn: (res) => {
      //     // console.log("取消");
      //   }
      // })
    },
    handleReason() {
      if (this.makeVal === 99 && !this.reason) {
        this.$message.warning('请输入取消原因')
        return
      }
     if (this.typeNum === 1) {
       this.cancelOrder.remark = this.makeVal === 99 ? this.reason : this.dialogOptions.find(item => item.id === this.makeVal)?.reason
           const params = this.cancelOrder
           delPatientBed(params).then((res) => {
             if (res.data.code === 200) {
               this.$message.success(res.data.message)
               this.cancelOrder = {}
               this.$router.go(0)
               this.dialogVisible = false
             } else {
               this.$message.error(res.data.message)
             }
           })
     } else {
        const param = {
            name: this.sendtipRow.name,
            jobNumber: this.sendtipRow.jobNumber,
            diagName: this.sendtipRow.diagName,
            nurseCellName: this.sendtipRow.nurseCellName,
            remark: this.makeVal === 99 ? this.reason : this.dialogOptions.find(item => item.id === this.makeVal)?.reason
          }
          sendMessageToDoctor(param).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.getList()
              this.dialogVisible = false
            } else {
              this.$message.error(res.data.message)
            }
          })
     }
    },
    // 作废按钮
    deletebtn() {
      this.$confirm({
        content: '确定要将此患者状态变更为作废吗？',
        title: '确认信息',
        okFn: (res) => {
          const params = {
            preId: this.deletepreid
          }
          updateStatus(params).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('变更成功')
              this.deletepreid = ''
              this.$router.go(0)
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: (res) => {
          // console.log("取消");
        }
      })
    },
    // 取消预绑定
    deletebtnClick() {
      const params = {
        bedId: this.parameterObj.bedNo,
        patientId: this.parameterObj.preid,
        name: decodeURIComponent(this.parameterObj.name)
      }
      updatePrebundled(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 添加床位申请按钮、
    btnAdd() {
      // JSON.parse(localStorage.userInfo).userName
      // JSON.parse(localStorage.userInfo).realname
      const routeUrl = this.$router.resolve({
        path: '/settings/bed-application',
        query: {
          preid: this.itemAdd.preid,
          createBy: '预绑定操作员',
          jobnumber: this.itemAdd.operCode
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    getUrl() {
      if (this.tabsState === 4 || this.tabsState === 5) {
        window.open(
          `http://172.16.2.226:8041/Patient/VisitRecord?PageType=RECORDINFO&VisitNumber=${this.clinicCode}`,
          '_blank'
        )
      } else {
        window.open(
          `http://172.16.2.226:8041/Patient/VisitRecord?PageType=RECORDINFO&PatientNo=${this.clinicCode}`,
          '_blank'
        )
      }
    },
    formatterTime(row, column) {
      const data = row[column.property]
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
    },
    patientTagConvert(val) {
      let typeName = '普通患者'
      if (val === '1') {
        typeName = '日间手术'
      } else if (val === '2') {
        typeName = '院前准备'
      } else if (val === '4') {
        typeName = '日间输注'
      }
      return typeName
    }
  }
}
</script>
<style lang="less" scoped>
.text-history {
  color: red;
  padding-left: 40px;
  box-sizing: border-box;
  font-weight: bold;
}
.form-history {
  border: 1px soild red !important;
  // display: flex;
  // flex-direction: column;
  // flex: 1;
}
.sf-historyRule {
  // margin: auto calc((100% - 400px)/2);
  height: 70vh;
  margin-top: 50px;
}
.a-link {
  color: #67c23a;
  cursor: pointer;
}
.showTip {
  position: absolute;
  left: 83px;
  font-size: 12px;
}
.tabs {
  padding-left: 26px;
  position: relative;
  span {
    display: inline-block;
    width: 110px;
    height: 42px;
    box-sizing: border-box;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
  }
  .span-active {
    color: #2165f9;
    border-bottom: 2px solid #217dfa;
  }
  .editbox {
    position: absolute;
    right: 26px;
    top: 0px;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.emergency-treatment {
  width: 100%;
  display: flex;
  .left {
    width: 40px;
    background-color: #2b80ff;
    color: #fff;
    font-size: 20px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right-outpatient {
    padding: 18px 16px 10px 15px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fff;
    margin-left: 11px;
    width: 100%;
    overflow-y: auto;
    .more-img {
      cursor: pointer;
    }
  }
  .right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    grid-row-gap: 17px;
    grid-column-gap: 17px;
    width: 100%;
    justify-content: stretch;
    .right-list {
      // width: 288px;
      height: 135px;
      box-sizing: border-box;
      border-radius: 3px;
      background-color: rgba(255, 255, 255, 100);
      color: #666666;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
      overflow: hidden;
      .list-title {
        color: #555555;
        font-size: 16px;
      }
      p {
        font-size: 14px;
      }
      .list-state {
        div {
          width: 60px;
          height: 24px;
          font-size: 16px;
          line-height: 24px;
          text-align: center;
          border-radius: 4px;
        }
      }
      .stay {
        background-color: rgba(204, 230, 255, 100);
        color: rgba(5, 129, 254, 100);
        margin-left: 4px;
      }
    }
    .right-list-active {
      border: 1px solid #2b80ff;
    }
    .changeColor {
      background-color: #f5b77c;
    }
  }
}
.right-patients {
  min-width: 240px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 12px;
  background-color: #fff;
  overflow: hidden;
  .patients-content {
    height: 161px;
    padding: 21px 0 0 18px;
    box-sizing: border-box;
    line-height: 20px;
    color: #555555;
    p {
      font-size: 14px;
      margin-bottom: 19px;
    }
  }
  .view-patients {
    height: 46px;
    background: #f4f8fb;
    border: 1px solid #e7ecf8;
    color: #555555;
    padding: 16px 16px 14px 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.drawer-box {
  padding-top: 15px;
  p {
    width: 100%;
    height: 40px;
    background-color: #f4f8fb;
    color: #555555;
    font-size: 16px;
    line-height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .box-information {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 23px 0px 23px 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .basic-box {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      color: #555555;
      div {
        width: 240px;
        height: 33px;
        line-height: 33px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .more-text {
      width: 100px;
      position: absolute;
      right: 10px;
      bottom: 20px;
      color: rgba(24, 144, 255, 100);
      cursor: pointer;
      font-size: 14px;
    }
  }
  .demo-ruleForm {
    box-sizing: border-box;
    padding: 15px 18px 0 11px;
    .formitem {
      display: flex;
      justify-content: space-between;
      /deep/ .el-input__suffix-inner {
        pointer-events: all;
        display: flex;
        align-items: center;
        height: 100%;
      }
    }
    /deep/ .el-form-item__error {
      padding: 0 !important;
    }
    .el-form-item {
      margin-bottom: 10px !important;
    }
    /deep/ .el-form-item__label {
      color: #555555 !important;
    }
  }
  .el-table /deep/.cell {
    font-size: 14px !important;
  }
  .el-button /deep/ span {
    font-size: 14px !important;
  }
}
.menu {
  // height: 90px;
  width: 90px;
  position: absolute;
  z-index: 99;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  // border: 1px solid red;
  .menu__item {
    display: block;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
    /deep/.btn-primary {
      width: 100%;
      background: #fff;
      color: #555;
      font-size: 14px;
    }
  }
}
.menuss {
  // height: 90px;
  width: 90px;
  position: absolute;
  left: -50px;
  top: 50px;
  z-index: 99;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  // border: 1px solid red;
  .menu__item {
    display: block;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
  }
}
</style>
<style lang="less" scoped>
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
  /deep/.form-item {
    min-width: 200px;
    .el-range-editor--mini.el-input__inner {
    width: 220px;
    }
  }
  .right-btn-container {
    height: 100px;
    text-align: right;
    // border: 1px solid red;
    flex: 1;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color: #2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
}
.form-item {
  min-width: 280px;
  height: 28px;
}
.form {
  display: flex;
  align-items: center;
  p {
    margin-right: 40px;
    color: #909399;
  }
}

/deep/.el-table .cell {
  display: flex !important;
  .btn-primary {
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .ck-button {
    min-width: 0px !important;
    margin-top: 5px !important;
  }
}
.item-phone {
  display: flex;
  justify-content: space-between;
}
</style>
